<template>
  <div class="qopSon" @click="show">
  	<div class="word_box word12">
		  	<div class=" word_gj">
			  	<span>复制信息</span>
			  	<span>详情</span>
			</div>
			<div class="word_text ">
		  		{{word}}
			</div>
	  </div>
	<div id="echart_box12" class="echart_box12 echart_box_all">

	</div>
  </div>
</template>

<script>
import topTitle from './top'
import echarts from 'echarts'
export default {
    props:["msg"],
	components: {
        topTitle,
    },
	data() {
		return {
			title:{
				name: "近12小时最大雨强",
				time: "2018-10-22 16:13",
			},
			word:"",
			charts:{},
		}
	},
	methods:{
		show(){

		},
        closeThis(){
            this.$emit('closep',this.msg.name)
		},
		refreshAll(){
			setTimeout(()=>{
				this.refreshEchartHeight();
				this.charts.resize();
			},1000);
		},
		refreshEchartHeight(){
			var height=$(".qop")[0].clientHeight-$(".indexComTop")[0].clientHeight-$(".word12")[0].clientHeight-10;
			$(".echart_box12").css("height",height)
		},
		doEchart(data){
			this.refreshEchartHeight();
			var arr=[];
			var x=[];
			var y=[];
			var name11=[];
			for(var i=0;i<data.length;i++){
				x.push(data[i].ObservTimes.slice(6,8)+"时");
				y.push(data[i].Precipitation);
				name11.push(data[i].StationName);
				// y.push();
			}
			this.charts = echarts.init(document.getElementById("echart_box12"));
			this.charts.setOption({
				color: ['#3398DB'],
				tooltip : {
					trigger: 'axis',
					axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					show: false,
					top:"18%",
					left: '3%',
					right: '4%',
					bottom: '0%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						data : x,
						axisTick: {
							alignWithLabel: true
						},
						axisLine:{
							lineStyle: {
								color: '#fff'
							}
						}
					}
				],
				yAxis : [
					{
						type : 'value',
						splitLine:{show: false},
						axisLine:{
							lineStyle: {
								color: '#fff'
							}
						}
					},
				],
				series : [
					{
						name:'雨强',
						type:'bar',
						barWidth: '60%',
						data:y,
						itemStyle: {
							normal: {
								// barBorderRadius: 5,
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{offset: 0, color: '#00E1F4'},
										{offset: 1, color: 'rgba(0,222,240,0.1)'}
									]
								)
							}
						},
						label: {//bar里面显示的内容
							normal: {
									show: true,
									color:"#fff",
									position: 'top',
									formatter:function(val) {
									return name11[val.dataIndex].replace(/乡/g,"").replace(/镇/g,"")+"\n"+y[val.dataIndex]
								}
							},

						},
					}
				]
			})
		}

    },
	mounted(){
		this.$emit('refreshTop',this.title);
		this.$ajax({method: 'get',	url: "http://172.21.129.156:8081/web/rain/RainStrong?code=330600000000&type=1",}).then((res)=>{
			var _data=res.data.DS;
			this.title.time=_data.time;
			this.word=_data.word;
			setTimeout(()=>{
				this.doEchart(_data.hour);
			},1000)
		})
		.catch(function(err){
			//console.log(err)
		})
	}
}
</script>

<style lang="less">
	.word_box{
		font-size: 12px;
		padding: 15px 10px 0;
		.word_gj{
			text-align: right;
			padding: 0 0 12px 0;
			span{
				color: #3E8FE3;
				margin-right: 12px;
				cursor: pointer;
				&:hover{
					text-decoration: underline;
				}
			}
		}
		.word_text{
			text-indent: 2em;
		}
	}
</style>
